{extend name="main"}
{block name="body"}



<el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
    <el-form ref="form"  label-width="130px" @submit.native.prevent="submitForm"  ref="form" >
        <el-form-item label="分组名称" hide-required-asterisk>
            <el-input v-model="groupForm.title"
                      maxlength="15"
                      type="text"
                      show-word-limit
                      style="width:70%;" ></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary"@click="submitForm('form')">确 定</el-button>
  </span>
</el-dialog>

<div class="bg-white mb-3">
    <el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right" class="flex py-3">
        <el-form-item label="二维码名称" prop="title" class="flex mb-0 pl-3">
            <el-input v-model="search.title" placeholder="请输入你想搜索的关键词"></el-input>
        </el-form-item>
        <el-form-item class="flex mb-0 pl-3">
            <el-button type="primary" @click="initHtml">查询</el-button>
            <el-button @click="resetForm('search')">重置</el-button>
            <el-button  type="primary" plain @click="addGroup">添加分组</el-button>
            <el-button type="primary" @click="window.open('/work-wechat/addChannelCode')">新建活码</el-button>
        </el-form-item>
    </el-form>
</div>
<div class="bg-white p-3">
    <div class="table-responsive">
        <el-tabs tab-position="left" v-model="groupId" >
            <el-tab-pane v-for="(item,i) in groupData" :stretch="true" :label="item.title" :name="item.id" >
                <span slot="label">
                    <span>{{ item.title }}</span>
                    <el-dropdown v-if="item.id!=0">
                    <i  class="el-icon-edit"></i>
                    <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="modifyGroup(item.id,item.title)">修改</el-dropdown-item>
                    <el-dropdown-item @click.native="delGroup(item.id)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                </span>
            </el-tab-pane>


        <el-table
                ref="tableList"
                :data="tableData"
                v-loading="search.ajax"
                style="width: 100%;"
                header-cell-class-name="table-header-DDE6FB">

            <el-table-column
                    label="二维码">
                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.qr_code"
                            @click.stop="handleClickItem"
                            :preview-src-list="[scope.row.qr_code]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="scan_code"
                    label="扫码添加次数">
            </el-table-column>
            <el-table-column
                    label="创建时间">
                <template slot-scope="scope">
                    <div class="small">
                        <div>{{ scope.row.create_time }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="标签">
                <template slot-scope="scope">
                    <div class="small">
                        <div>
                            <el-tag v-for="(item,i) in JSON.parse(scope.row.tags)" class="m-1"  type="warning" size="mini">{{item.name}}</el-tag>
<!--                            {{ scope.row.tags }} -->
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="/">
                <template slot-scope="scope">
                    <div v-if="!scope.row.delete_time">
                        <el-button
                                type="primary"
                                plain

                                @click="window.open('/work-wechat/downQrCode/'+scope.row.id)">
                            下载
                        </el-button>
                        <el-button
                                type="primary"
                                plain

                                @click="window.open('/work-wechat/modifyChannelCode/'+scope.row.id)">
                            编辑
                        </el-button>
                        <el-button
                                type="danger"
                                plain

                                @click="delChannelCode(scope.row.id)">
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        </el-tabs>
    </div>
    <div class="table-responsive py-3 text-center">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="search.page"
                :page-sizes="[10,50,100,200]"
                :page-size="search.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="search.total">
        </el-pagination>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    var groupData = JSON.parse('{:json_encode($groupData)}'.replace(/[\r\n\s+]/g, '\\n'));
    // console.log(groupData);
    groupData.unshift({id:0,title:"全部"})
</script>
<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            view:XYBase.view,
            groupId:"0",
            centerDialogVisible:false,
            groupData:groupData,
            isEdit:false,
            defaultProps: {
                value: 'id',
                label: 'title',
                children: 'data'
            },
            groupForm:{
                title:"",
                id:"",
            },
            search:{
                title:'',
                ajax:false,
                pid:"0",
                page:1,
                total:0,
                pageSize:10
            },
            tableData:[],
        },
        watch:{
            view:XYBase.viewWatch,
            groupId(newId,lodId){
                console.log(newId)
                this.search.pid=newId
                this.initHtml()
            },
        },
        created(){
            XYBase.created(this);
        },
        methods: {

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            resetForm:function(formName) {
                this.$refs[formName].resetFields();
            },
            handleSizeChange(val) {
                this.search.page=1;
                this.search.pageSize=val;
                this.initHtml();
            },
            handleCurrentChange(val) {
                this.search.page=val;
                this.initHtml();
            },
            //切换选项卡
            handleClick(tab, event) {
                console.log(tab)

            },
            addGroup() {
               this.centerDialogVisible=true;
            },
            //添加分组
            submitForm(){
                var _this=this;
                console.log(_this.groupTitle)
                if (_this.groupForm.title==undefined || _this.groupForm.title==''){
                    XYBase.error("请输入分组名称")
                    return;
                }
                var url="/work-wechat/addChannelCode";
                if (_this.isEdit)
                    url="/work-wechat/modifyChannelCode";
                $.ajax({
                    url:url,
                    type: 'post',
                    data:_this.groupForm,
                    dataType: 'json',
                    success(res) {
                        if (res.code == 0) {
                            _this.centerDialogVisible=!_this.centerDialogVisible
                            _this.groupForm.title='';
                            _this.groupForm.id='';
                            _this.getGroupList();
                            XYBase.success(res.msg)
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        XYBase.error(XYBase.config.system_network_error)
                    },
                });
            },
            modifyGroup(id,title){
                this.centerDialogVisible=true;
                this.groupForm.title=title;
                this.groupForm.id=id;
                this.isEdit=true;
            },
            //预览图片时点击蒙版关闭图片预览
            handleClickItem(){
                this.$nextTick(()=>{
                    let domImageMask = document.querySelector(".el-image-viewer__mask");  // 获取遮罩层dom
                    if (!domImageMask) {
                        return;
                    }
                    domImageMask.addEventListener("click", () => {
                        // 点击遮罩层时调用关闭按钮的 click 事件
                        document.querySelector(".el-image-viewer__close").click();
                    });
                })
            },
            delGroup(id){
                let _this=this;
                $.ajax({
                    url:"/work-wechat/delChannelCode",
                    type: 'post',
                    data:{id},
                    dataType: 'json',
                    success(res) {
                        if (res.code == 0) {
                            _this.getGroupList();
                            XYBase.success(res.msg)
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        XYBase.error(XYBase.config.system_network_error)
                    },
                });
            },
            getGroupList(){
                let _this=this;
                $.ajax({
                    url:"/work-wechat/getChannelGroup",
                    type: 'get',
                    dataType: 'json',
                    success(res) {
                        if (res.code == 0) {
                            _this.groupData=res.data;
                            _this.groupData.unshift({id:0,title:"全部"})

                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        XYBase.error(XYBase.config.system_network_error)
                    },
                });
            },
            delChannelCode(id){
                var _this=this;
                console.log(123456)
                _this.search.ajax=true;
                this.$confirm('确认删除该条数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        url:'/work-wechat/delChannelCode',
                        type:'post',
                        data:{id},
                        dataType:'json',
                        error:function(err){
                            _this.search.ajax=false;
                            XYBase.error(XYBase.config.system_network_error);
                        },
                        success:function(ret){
                            if (ret) {
                                _this.search.ajax=false;
                                if (ret.code === 0) {
                                    XYBase.success("删除数据成功")
                                    _this.initHtml();
                                }else{
                                    XYBase.error(ret.msg);
                                }
                            }else{
                                _this.search.ajax=false;
                                XYBase.error(XYBase.config.system_network_error);
                            }
                        }
                    });

                }).catch(()=>{});//注意这里，这里是重点！！！
            },
            initHtml() {
                var _this=this;
                _this.search.ajax=true;
                $.ajax({
                    url:'',
                    type:'get',
                    data:_this.search,
                    dataType:'json',
                    error:function(err){
                        _this.search.ajax=false;
                        XYBase.error(XYBase.config.system_network_error);
                    },
                    success:function(ret){
                        _this.search.ajax=false;
                        if (ret) {
                            if (ret.code === 0) {
                                _this.search.total=ret.data.total;
                                _this.tableData=ret.data.data;
                            }else{
                                XYBase.msg(ret.msg);
                            }
                        }else{
                            XYBase.error(XYBase.config.system_network_error);
                        }
                    }
                });
            }
        }
    });
    $(function(){
        vm.initHtml();
        reloadWindowSize();
        $(window).resize(function(){
            reloadWindowSize();
        });
    });
    function reloadWindowSize (argument) {
        var winW=$(window).width();
        if(winW <= 576){
            vm.labelPosition='top';
        }else{
            vm.labelPosition='right';
        }
    }
</script>
{/block}